import React, { useState, useEffect } from "react";

import { createSlice, configureStore } from "@reduxjs/toolkit";

const countSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0
  },
  reducers: {
    plus: (state, action)=>{
      state.count+=action.payload.count
    },
    minus: (state, action)=>{
      state.count-=action.payload.count
    },
  }
})

export const {plus:pAction, minus:mAction}=countSlice.actions

const store=configureStore({
  reducer: countSlice.reducer
})

export default function App() {
  const [count, setCount] = useState()

  const plus=()=>{
    store.dispatch(pAction({count:1}))
  }
  const minus=()=>{
    store.dispatch(mAction({count:1}))
  }

  useEffect(()=>{
    store.subscribe(()=>{
      const state = store.getState()
      setCount(state.count)
    })
  })


  return (
    <div>
      <p>结果:{count}</p>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}
